<template>
	<view>
		<view class="bg" style="width: 100%;height:100%;background-color:#f7f7f7">
			<view class="header">
				<text style="font-size: 28rpx;color: #FFFFFF;font-weight: bold;">已接单</text>
				<text style="font-size: 24rpx;color: #FFFFFF;">请尽快赶到救援地点，进行救援</text>
				<text style="font-size: 20rpx;color: #FFFFFF;">12-03 16:00</text>
			</view>
			<view class="content">
				<view class="content_list">
					<text class="content_text_title">应急救援</text>
					<text class="content_text">工单编号：65747654654</text>
					<text class="content_text">12-03 16：00</text>
				</view>
				<view class="content_list">
					<text class="content_text_title">电梯使用单位编号</text>
					<text class="content_text">电梯救援编号：687633</text>
				</view>
				<view class="content_list">
					<text class="content_text_title">迅驰大厦</text>
					<text class="content_text">金牛区 抚琴街道营门口路45号
						<image @click="toMapAPP('','','四川省成都市金牛区营门口路45号')" class="icon"
							src="../../../static/posation.png" />
					</text>

				</view>
				<view class="content_list">
					<text class="content_text_title">救援结果</text>
					<text @click="clickShow" style="color: #007AFF;" class="content_text">请尽快进行救援任务，提交任务结果</text>
				</view>
				<button @click="saving" >进行救援</button>
			</view>
		</view>

		<!-- 对话框 -->
		<ennDialog :isShow="show" @dialogConfirm='dialogConfirm' @dialogCancel='dialogCancel' :content="dialogContent">
		</ennDialog>

	</view>
</template>

<script>
	import ennDialog from '../../../components/clx-dialog/clx-dialog.vue'
	export default {
		data() {
			return {
				title: '签到',
				show: false,
				dialogContent: '请确认签到'
			}
		},
		components: {
			ennDialog
		},
		methods: {
			saving() {
				uni.navigateTo({
					url: '../To_rescue/index'
				})
			},
			clickShow() {
				this.show = true
			},
			dialogConfirm() {
				this.show = false
			},
			dialogCancel() {
				this.show = false
			},
			//打开第三方地图
			toMapAPP(latitude, longitude, name) {
				let url = "";
				console.log(latitude)
				if (plus.os.name == "Android") { //判断是安卓端
					plus.nativeUI.actionSheet({ //选择菜单
						title: "选择地图应用",
						cancel: "取消",
						buttons: [{
							title: "腾讯地图"
						}, {
							title: "百度地图"
						}, {
							title: "高德地图"
						}]
					}, function(e) {
						switch (e.index) {
							//下面是拼接url,不同系统以及不同地图都有不同的拼接字段
							case 1:
								//注意referer=xxx的xxx替换成你在腾讯地图开发平台申请的key
								url = `qqmap://map/geocoder?coord=${latitude},${longitude}&referer=xxx`;
								break;
							case 2:
								url =
									`baidumap://map/marker?location=${latitude},${longitude}&title=${name}&coord_type=gcj02&src=andr.baidu.openAPIdemo`;
								break;
							case 3:
								url =
									`androidamap://viewMap?sourceApplication=appname&poiname=${name}&lat=${latitude}&lon=${longitude}&dev=0`;
								break;
							default:
								break;
						}
						if (url != "") {
							url = encodeURI(url);
							//plus.runtime.openURL(url,function(e){})调起手机APP应用
							plus.runtime.openURL(url, function(e) {
								plus.nativeUI.alert("本机未安装指定的地图应用");
							});
						}
					})
				}

			},



		}
	}
</script>

<style lang="scss">
	.header {
		display: flex;
		flex-direction: column;
		width: 90%;
		margin: auto;
		height: 182rpx;
		background-color: #6867c7;
		border-radius: 5px;

		text {
			padding: 8px 0;
			margin-left: 20px;
		}
	}

	.content {
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		width: 90%;
		background-color: #FFFFFF;
		margin: 20px auto;

		.content_list {
			width: 634rpx;
			margin: 20rpx 20rpx;
			border-bottom: 1px solid #CCCCCC;
		}

		text {
			display: flex;
			flex-direction: column;
			justify-content: space-between;
			padding: 10rpx 20rpx;
		}
		.content_text_title{
			font-size: 28rpx;
			
		}
		.content_text{
			font-size: 20rpx;
			color: #666666;
		}

		.icon {
			margin-left: 100px;
			height: 50rpx;
			width: 50rpx;


		}

	}

	button {
		width: 480rpx;
	
		line-height: 70rpx;
		font-size: 16px;
		vertical-align: middle;
		text-align: center;
		color: #FFFFFF;
		border-radius: 50rpx;
		background-color: #6867c7;
	}

	/* pupup */
	.popup-date {
		/* width: 630rpx; */
		width: 100%;
		height: 30rpx;
	}

	.popup-content {
		background-color: #fff;
		width: 330px;
		height: 350px;
		/* margin-top: 30px; */
	}

	.button-bottom {
		width: 630px;
		height: 100px;
		display: flex;
		justify-content: end;
		align-items: flex-end;
		background: #007AFF;
	}

	.popup-btn {

		width: 100%;
		height: 100px;
		background: #007AFF;
	}

	.popup-btn button {
		border-radius: 0px 0px 0px 0px;
		height: 100px;

		border: 1px solid #007AFF;
		background: #ccc;
		color: #FFFFFF;
		border: none;
	}

	.popup-btn2 button {
		border-radius: 0px 0px 0px 0px;
		height: 100px;
		border: 1px solid #007AFF;
		background: #007AFF;
		color: #FFFFFF;
		border: none;
	}

	button {
		border: none;
	}
</style>

</style>
